<template>
	<view>
		<!-- 组件1：商品列表 -->
		<uni-list>
			<uni-list-item  v-for="i in dataList.data" :key="i.lid"  :to="`/pages/product-details/product-details?pid=${i.lid}`">
			  <image class="porductImg" :src="$url.baseURL+i.pic" mode="widthFix" slot="header"></image>
				<view slot='body'>
					<text class="title">{{i.title}}</text>
					<view class="comments">
						<text class="price">￥{{i.price}}</text>
						<view>
							<uni-tag v-if="i.is_onsale==='1'" text="促销" type='error'></uni-tag>
							<text class="rate">{{i.sold_count}}条热销评论 好评率100%</text>
						</view>
					</view>
				</view>		
			</uni-list-item>
		</uni-list>
		<!-- 组件2：加载更多 -->
		<uni-load-more 
		:status="loadMoreStatus" 
		:contentText="{contentnomore:'我也是有底线的'}"
		></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:{pno:0}, //分页器对象 --保存了当前显示的商品和页数等信息
				kw:'', //查询的关键词
				loadMoreStatus:'more', //“加载更多”组件的状态
				//loadMoreStatus:'loading', //“加载更多”组件的状态
				//loadMoreStatus:'noMore' ,//“加载更多”组件的状态
			};
		},
		// 声明周期：触底事件
		onReachBottom() {
			console.log('---页面已经触底');
			this.loadNextPageData()
		},
		methods:{
			loadNextPageData(){
				if(this.dataList.pno>0 && this.dataList.pno>=this.dataList.pageCount)return
				//触底加载下一页
				let pno = this.dataList.pno+1
				let url= this.$url.productList+'?pno='+pno+'&kw='+this.kw
				// if(kw){
				// 	url+="&kw="kw
				// }
				console.log(url);
				uni.showLoading({
					title:"数据加载中...",
				})
				//修改“加载更多”组件的状态，改为加载中
				this.loadMoreStatus= 'loading'
				uni.request({
					url:url,
					success:(res)=>{
						//this.dataList = res.data //每次请求都会覆盖
						//判断数据模型是否存储了数据，是不是第一次请求
						if(this.dataList.data){
							res.data.data = this.dataList.data.concat(res.data.data)
						}
						this.dataList = res.data
						console.log('数据模型的数据：',this.dataList);
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						uni.hideLoading()
						//判断当前是否是最后一页，修改“加载更多”组件状态
						if(this.dataList.pno>=this.dataList.pageCount){
							this.loadMoreStatus = 'noMore'
						}else{
							this.loadMoreStatus = 'more'
						}
						uni.stopPullDownRefresh()
					}
				})
			},
		},
		onPullDownRefresh() {
			console.log('已触发下拉');
			this.dataList = {pno:0}
			this.loadNextPageData()
		},
		onLoad(data) {
			console.log('product-list:',data);
			
			if(data.kw){
				this.kw = data.kw
			}
			if(!data.bname)return
			uni.setNavigationBarTitle({
				title:data.bname+"馆"
			})
			this.loadNextPageData()
		},
		
	}
</script>

<style lang="scss">

.porductImg{
	flex-shrink: 0; //flex-shrink收缩权重为0，不参与收缩
	width: 160rpx;
	margin: -25rpx 5rpx -25rpx -20rpx;
}
.price{
	 color: #0aa1ed; 
	 font-weight: 600;
}
.title{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.comments{
	display: flex;
	flex-direction: column;
}
.rate{
	margin-left: 5rpx;
	 font-size: $uni-font-size-sm;
	 color: #B0A49E;
	 transform: scale(.85); //缩小到85%
	 transform-origin: 0% 50%;//变形原点 x: y:
}
</style>
